<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>我的公会</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
    list-style: none;
  }
  #app {
    padding: 10px;
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
/*    background-image: url("/mobile/img/top_bg.jpg");*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }
  .banner {
    border-radius: 10px;
    font-size: 0;
  }
  .banner img {
    width: 100%;
  }
  .guild-box {
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
    margin: 10px 0;
    padding: 10px;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
  }
  .guild-item {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .guild-item:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
  .guild-left {
    display: flex;
    max-width: 70vw;
  }
  .guild-info {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .guild-icon {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    object-fit: cover;
  }
  .guild-name {
    font-size: 14px;
    font-weight: bold;
  }
  .guild-desc {
    font-size: 12px;
    color: #A9ABCA;
  }
  .guild-member {
    font-size: 12px;
    color: #A9ABCA;
  }
  .join-btn {
    height: 30px;
  }
  .pretty-id {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    font-size: 12px;
    padding: 0 2px;
    margin-right: 5px;
  }
  
  </style>
</head>

<body>
  <div id="app">
    <div class="banner">
      <img src="/mobile/img/attented_top.png" alt="">
    </div>
    <div class="guild-box">
      <div class="title">公会列表</div>
      <van-empty v-if="!guildList.length" image="/mobile/img/empty.png" description="暂无公会"></van-empty>
      <ul v-else class="guild-list">
        <li class="guild-item" v-for="(item, index) in guildList" :key="index" @click="join(item)">
          <div class="guild-left">
            <img class="guild-icon" :src="item.badge +'?x-oss-process=image/resize,h_160,m_fill/format,jpg'" alt="">
            <div class="guild-info">
              <div class="guild-name">{{item.name}}</div>
              <div class="guild-desc">{{item.briefing}}</div>
              <div class="guild-member">成员：{{item.personQty}}人</div>
              <div class="guild-member"><span class="pretty-id">靓</span>{{item.goodNum}}</div>
            </div>
          </div>
          <van-button class="join-btn" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round>加入</van-button>
        </li>
      </ul>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      token: '',
      guildList: []
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      console.log(data)
      if (data.token) {
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        request.post('/api/business/app/family/getList', {
          page: -1,
          limit: 500
        }).then(res => {
          console.log(res)
          this.guildList = res.data.list
        })
      },
      join (item) {
        location.href = `./detail.html?id=${item.id}&token=${this.token}`
      }
    }
  })
  </script>
</body>

</html>